<template>
    <view class="foot">
        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
            <view class="f ai-c jc-s-b h-100 ph-40">
                <view class="f ai-c jc-s-b f1 mr-32">
                    <view>
                        <view>
                            <text class="fs-36 fw-600 price-color mr-12">¥{{detail.price}}</text>
                            <text class="fs-22 text-color3 old-price">¥{{(detail.price*1+detail.discountPrice*1)/<!-- #ifndef APP -->

                            <!-- #endif -->100}}</text>
                        </view>
                        <view class="fs-22 text-color3">优惠：¥{{detail.discountPrice}}</view>
                    </view>
                   <!-- <view class="f ai-c fd-c">
                        <image src="http://cwht.ricecs.cn/app/shop/kf-h.png" class="w-32 h-32"></image>
                        <view class="fs-20 text-color4 mt-8"> 客服</view>
                    </view> -->
					<view class="f ai-c fd-c w-100" >
					    <button  open-type="contact" plain style="border: none;margin: 0;padding: 0;">
					        <image src="http://cwht.ricecs.cn/app/shop/kf-h.png" class="w-32 h-32 "></image>
					        <view class="fs-20 text-color4 mt-8"> 客服</view>
					    </button>
					</view>
                </view>
                <view class="f">
                    <view class="buy w-300 h-72 fs-28 fw-600 text-color5 b-68 f ai-c jc-c" @click="toSubscribe">立即预约</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { toRefs } from 'vue';
	const props = defineProps({
	    detail: {
	        type: Object,
	    }
	});
	const { detail } = toRefs(props);
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
const toSubscribe = () => {
	uni.setStorageSync('shop',detail.value)
    uni.navigateTo({
        url: '/pages_serve/subscribeList/index?id='+detail.value.storeId,
    });
};
</script>
<style lang="scss" scoped>
.foot {
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        .old-price {
            text-decoration: line-through;
        }
        .price-color {
            color: #ec5330;
        }
        .add-cart {
            border: 2rpx solid #fabb3c;
        }
        .buy {
            background: #fabb3c;
        }
        ::v-deep .u-button__text {
            font-size: 28rpx !important;
            font-weight: 600 !important;
            color: #fff;
        }
        ::v-deep .u-button {
            height: 72rpx !important;
            padding: 0 !important;
        }
    }
}
</style>
